<template>
    <el-form ref="grammarSearchRef" :model="searchEntity" label-width="100px" :inline="true" size="small">
        <el-form-item label="课程类型" prop="parentCourseId">
            <el-select v-model="searchEntity.parentCourseId" placeholder="请选择课程类型" @change="courseChangeEvent" >
                <el-option label="全部" value="ALL"/>
                <el-option v-for="item in parentCourseData" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="课程" prop="courseId">
            <el-select v-model="searchEntity.courseId" placeholder="请选择课程" :clearable="true">
                <el-option v-for="item in childCourseData" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="语法" prop="grammarContent">
            <el-input v-model="searchEntity.grammarContent" placeholder="请输入要查询的语法"></el-input>
        </el-form-item>
        <el-form-item label="语法解释" prop="grammarExplain">
            <el-input v-model="searchEntity.grammarExplain" placeholder="请输入要查询的语法对应中文"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button class="btn" type="primary" icon="el-icon-search" @click="onSearch"> 搜 索 </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {getCourseTreeApi} from '@/api/words/wordApi'
    export default{
        props:{
            //搜索组件数据对象
            searchEntity:{
                type: Object,
                required: true
            }
        },
        data(){
            return {
                //渲染主课程的数据
                parentCourseData:[],
                //渲染子课程的数据
                childCourseData:[]
            }
        },
        methods:{
            //获取课程树（数据）
            getCourseTree(){
                getCourseTreeApi().then(data=>{
                    this.parentCourseData = data.map(item=>({value:item.courseId,label:item.courseName}));
                    if(this.searchEntity.parentCourseId != undefined && this.searchEntity.parentCourseId != null){
                        let result = data.find(node=>node.courseId == this.searchEntity.parentCourseId);
                        if(result && result.child && result.child.length > 0){
                            this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                        }
                    }
                }).catch(err=>{
                    this.$message.error(err);
                })
            },
            //课程数据改变
            courseChangeEvent(v){
                if(v != 'ALL'){
                    getCourseTreeApi().then(data=>{
                        let result = data.find(node=>node.courseId == v);
                        if(result.child.length > 0){
                            this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                            //如果变更后的子元素中不包含已选中的数据，通知父组件清除掉
                            if(!this.childCourseData.includes(this.searchEntity.courseId)){
                                this.$emit('parentCourseChange',v);
                            }
                        }
                    }).catch(err=>{
                        this.$message.error(err);
                    })
                }else{
                    this.$emit('parentCourseChange');
                }
            },
            //搜索
            onSearch(){
                this.$emit('onSearch')
            }
        },
        mounted(){
            this.getCourseTree();
        }
    }
</script>

<style scoped lang="scss">
    .el-button{
    padding-left: 25px;
    padding-right: 30px;
    }
    .btn{
    margin-left: 30px;
    }
</style>
